<template>
  <div class="trainingList">
    <div class="t-header">
      <div class="t-h-title"> <i class="iconfont icon-liebiao2"></i>训练列表</div>
    </div>
    <div class="t-search">
      <n-input class="t-s-input" placeholder="搜索训练" round size="small" v-model:value="searchVal">
        <template #suffix>
          <i class="iconfont icon-sousuo" @click="updateSearchParams"></i>
        </template>
      </n-input>
      <n-button class="t-s-btn" size="small" round type="success" @click="hanlderToCreate"><i
          class="iconfont icon-tianjia"></i>创建</n-button>
    </div>
    <div class="t-table">
      <el-table class="table" :data="trainingList.records" size="small" stripe>
        <el-table-column type="index" label="序号" width="100%" align="center" :index="indexMethod" />
        <el-table-column prop="id" label="ID" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="center"></el-table-column>
        <el-table-column prop="auth" label="训练权限" align="center">
          <template #default="scoped">
            <n-tag type="warning" v-show="scoped.row.auth == 2" round size="small" :bordered="false">保护训练</n-tag>
            <n-tag type="error" v-show="scoped.row.auth == 1" round size="small" :bordered="false">私有训练</n-tag>
            <n-tag type="success" v-show="scoped.row.auth == 0" round size="small" :bordered="false">公开训练</n-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scoped">
            <el-tooltip content="是否展示该训练" placement="top">
              <el-switch v-model="scoped.row.status" :active-value="0" :inactive-value="1"
                @change="updateTraining(scoped.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" align="center"></el-table-column>
        <el-table-column prop="updateTime" label="时间" align="center" min-width="150">
          <template #default="scoped">
            <div class="t-t-time">
              <div class="time">createTime：{{ scoped.row.createTime }}</div>
              <div class="time">updateTime：{{ scoped.row.updateTime }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="140">
          <template #default="scoped">
            <div class="t-t-comparation">
              <n-button class="nbtn" size="tiny" type="info" @click="hanlderToEdit(scoped.row.id)"><i
                  class="iconfont icon-bianji"></i></n-button>
              <n-button class="nbtn" size="tiny" type="success" @click="handlerToProblemList(scoped.row.id)"><i
                  class="iconfont icon-chakan1"></i></n-button>
              <n-button class="nbtn" size="tiny" type="warning" :disabled="scoped.row.auth != 2"
                @click="handlerToProtectTrain(scoped.row.id)"><i
                  class="iconfont icon-dangjian_duiwujianshe"></i></n-button>
              <n-button class="nbtn" size="tiny" type="error" @click="deleteTraining(scoped.row.id)"><i
                  class="iconfont icon-shanchu"></i></n-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="t-footer">
      <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small layout="prev, pager, next,sizes"
        :total="Number(trainingList.total)" v-model:current-page="searchParams.pageNum"
        v-model:page-size="searchParams.pageSize" />
    </div>
  </div>
</template>

<script>
import { getTrainingListAdminAPI, deleteTrainingAPI, updateTrainingStatusAPI } from "@/api/adminAPI/adminAPI"
import { ElMessage } from 'element-plus'

export default {
  data () {
    return {
      trainingList: {
        total: 20,
        records: []
      },
      searchParams: {
        pageNum: 1,
        pageSize: 20,
        title: '',
        auth: ''
      },
      searchVal: '',
      timer: null,
      preTime: 0
    }
  },
  mounted () {
    this.getTrainingListAdmin()
  },
  methods: {
    //获取训练列表
    getTrainingListAdmin () {
      getTrainingListAdminAPI(this.searchParams).then(res => {
        if (res.data.code === 200) {
          this.trainingList = res.data.data
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    //减少请求次数
    updateSearchParams () {
      this.searchParams.title = this.searchVal
    },
    //删除训练
    async deleteTraining (id) {
      const a = [id]
      await deleteTrainingAPI(a).then(res => {
        if (res.data.code === 200) {
          ElMessage.success("删除成功")
          this.getTrainingListAdmin()
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    //跳转编辑训练页面
    hanlderToEdit (id) {
      this.$router.push({
        path: `list/${id}/edit`
      })
    },
    //更新训练
    updateTraining (row) {
      updateTrainingStatusAPI(row.id, row.status).then(res => {
        if (res.data.code === 200) {
          ElMessage.success("更新成功")
        }
      }).catch(err => {
        console.log("系统错误")
      })
    },
    hanlderToCreate () {
      this.$router.push({
        path: '/admin/training/create'
      })
    },
    handlerToProblemList (id) {
      this.$router.push({
        path: `/admin/training/${id}/problemList`
      })
    },
    handlerToProtectTrain (id) {
      this.$router.push({
        path: `/admin/training/${id}/users`
      })
    },
    indexMethod (index) {
      return (this.searchParams.pageNum - 1) * this.searchParams.pageSize + index + 1
    }
  },
  watch: {
    searchParams: {
      deep: true,
      handler () {
        this.getTrainingListAdmin()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.trainingList {
  margin: auto;
  width: 96%;
  height: 92vh;

  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9,
    -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;

  .t-header {
    display: flex;

    .t-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .t-search {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin: 20px 0 0 0;
    padding-bottom: 10px;
    border-bottom: 2px solid @lineColor;

    .t-s-input {
      height: 30px;
      line-height: 30px;
      width: 20%;
    }

    .t-s-btn {
      margin: auto 20px;
    }
  }

  .t-table {
    width: 100%;
    margin: 10px auto 0 auto;

    .table {
      height: 72vh;
    }

    .t-t-time {
      display: flex;
      flex-direction: column;

      .time {
        color: black;
      }
    }

    .t-t-comparation {
      width: 100%;
      display: flex;

      .nbtn {
        margin: auto 2px;
      }
    }
  }

  .t-footer {
    margin: auto auto 0 auto;
    display: flex;
    justify-content: center;
  }
}
</style>